<page-header [title]="title">
    <ng-template #title>
        {{'OrganizationUnits' | localize}}
        <span class="text-sm text-grey-dark">
            <nz-divider nzType="vertical"></nz-divider>
            {{'OrganizationUnitsHeaderInfo' | localize}}
        </span>
    </ng-template>
</page-header>
<nz-row nzGutter="8">
    <nz-col nzSpan="8">
        <organization-tree #ouTree (selectedChange)="ouMembers.organizationUnit = $event"></organization-tree>
    </nz-col>
    <nz-col nzSpan="16">
        <organization-unit-members #ouMembers (membersAdded)="ouTree.membersAdded($event)" (memberRemoved)="ouTree.memberRemoved($event)"></organization-unit-members>
    </nz-col>
</nz-row>